<template>
  <div class="picturefunc">
    <div class="searchbox">
      <input type="text" placeholder="输入关键词,按enter键搜索">
    </div>
    <div class="picfile">
      <a href="#" class="file active">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="file">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="file">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="file">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="file">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="file">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="file">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="file">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="file">
        <em></em>
        <p>全部图片</p>
        <i class="edit"></i>
        <i class="delete"></i>
      </a>
      <a href="#" class="addfile">
        <em></em>
        <p>添加分类</p>
      </a>
    </div>
    <div class="filecont">
      <div class="editbtn">
        <a href="#" class="upload fl">上传图片</a>
        <a href="#" class="f_manage f_btn fr">管理</a>
        <a href="#" class="f_delete f_btn fr none">删除</a>
        <a href="#" class="f_exit f_btn fr none">退出</a>
      </div>
      <div class="filewrap">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    
</script>

<style scoped>
.picturefunc{position: fixed;width:330px;height: 100%; background: #fff;z-index: 999}
.searchbox{width: 280px;height: 40px;background: #f3f3f3;margin: 15px auto;border-radius: 20px;overflow: hidden;}
.searchbox input{display: block; border: 0;margin: 0;padding: 0;height: 40px;line-height: 40px;width: 250px;padding-left: 50px;background: url(../assets/images/searchicon.png) no-repeat 20px center #f3f3f3;color: #bdbdbd;font-size: 13px;}
.picfile{width: 300px;margin: 0 auto;overflow-y: auto;max-height: 294px;}
.picfile a{float: left;position: relative;width: 90px;margin: 4px}
.picfile a:hover,.picfile a.active{background: #effaf8;box-shadow: 0px 2px 5px 0px rgba(210, 210, 210, .5)}
.picfile a em{display: block;width: 51px;height: 45px;margin: 10px auto 5px;}
.picfile a.file em{background: url(../assets/images/file.png) no-repeat center;}
.picfile a.addfile em{background: url(../assets/images/add.png) no-repeat center;}
.picfile a p{width: 100%;height: 30px;line-height: 30px;color: #696969;font-size: 13px;text-align: center;}
.picfile a.file.active i{display: block;position: absolute;width: 22px;height: 22px;top: 0;z-index: 1000;cursor: pointer;}
.picfile a.file.active i.edit{background: url(../assets/images/ficon1.png) no-repeat center;left: 0;}
.picfile a.file.active i.delete{background: url(../assets/images/ficon2.png) no-repeat center;right: 0;}

.filecont{width: 300px; margin: 15px auto;border-top: 1px solid #eee}
.filecont .editbtn{overflow: hidden;margin: 15px auto;width: 280px;}
.filecont .editbtn .upload{width: 100px;height: 34px;line-height: 34px;text-align: center;color: #fff;background: #22d7bb;font-size: 14px;border-radius: 5px;}
.filecont .editbtn .f_btn{font-size: 14px;color: #696969;padding-left: 20px;height: 34px;line-height: 34px;margin-left: 15px;}
.filecont .editbtn .f_btn.f_manage,.filecont .editbtn .f_btn.f_exit{background: url(../assets/images/editicon.png) no-repeat left center;}
.filecont .editbtn .f_btn.f_delete{background: url(../assets/images/deleteicon.png) no-repeat left center;}
.filecont .filewrap{width: 300px;height: 400px;overflow-y: auto;}
.filecont .filewrap li{float: left;width: 90px;height: 90px;margin: 4px;background: #cfc}

</style>


